<template>
	<view class="footer">
		<view class="footer-left">
			<!-- <view class="uni-icon uni-icon-mic" @tap="startRecognize"> </view> -->
			<image @click="ChooseImage" class="semil" src="../static/add.png" mode="" ></image>
			<!-- <image class="semil" src="../static/face.png" mode=""></image> -->
		</view>
		<view class="footer-center">
			<input class="input-text" type="text" v-model="inputValue"></input>
		</view>
		<view class="footer-right">
			
			<view id='msg-type'  @tap="sendMessge">发送</view>
		</view>
	</view>
</template>

<script>
	import OSSUtil from '../libs/ossUtil.js'
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: '',
				imagearr:[]
			}
		},
		methods: {
			startRecognize: function () {
				var options = {};
				var that = this;
				options.engine = 'iFly';
				that.inputValue = "";
				plus.speech.startRecognize(options, function (s) {
					console.log(s);
					that.inputValue += s;
				}, function (e) {
					console.log("语音识别失败：" + e.message);
				});
			},
			sendMessge: function () {
				var that = this;
				if (that.inputValue.trim() == '') {
					that.inputValue = '';
				} else {
					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
				}
			},
			async ChooseImage() {
				let files = await OSSUtil.getImage(); // 选择图片
				let sign = await OSSUtil.get_STS() // 获取签名等信息
			
				let imageSrc = files.tempFilePaths[0];
				let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
			
				let uploadTask = uni.uploadFile({
					url: sign.host,
					filePath: imageSrc,
					fileType: 'image',
					name: 'file',
					formData: {
						name: imageSrc,
						'key': fileName,
						'policy': sign.policy,
						'OSSAccessKeyId': sign.accessId,
						'success_action_status': '200',
						//让服务端返回200,不然，默认会返回204
						'signature': sign.signature,
					},
					success: (res) => {
						let that = this
						console.log(sign.host + '/' + fileName)
						
						let img = sign.host + '/' + fileName
						this.imagearr = this.imagearr.concat(img)
			
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 1000
						});
						
						this.$emit('send-message', {
							type: 'image',
							content: img
						});
						that.inputValue = '';
					},
					fail: (err) => {
						console.log('uploadImage fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
				uploadTask.onProgressUpdate((res) => {
					console.log("上传进度" + res.progress);
					this.progress = res.progress;
				});
			
				// this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
			},
		}
	}
</script>

<style scoped>
	@import "../common/icon.css";
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* height: 80rpx; */
		min-height: 80rpx;
		border-top: solid 1px #ddd;
		overflow: hidden;
		padding: 5rpx;
		background-color: #fafafa;
	}
	.footer-left {
		width: 150rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-right {
		width: 120rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #1482D1;
	}
	.semil{
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}
	.footer-center {
		flex: 1;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-center .input-text {
		flex: 1;
		background: #fff;
		border: solid 1px #ddd;
		padding: 10upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15rpx;
	}
</style>